<template>
	<view class="terminal_content">

		<view class="balance-panel flex justify-start align-center">
			<view class="title">{{$t('common.myBalance')}}</view>
			<view class="number" style="margin-left: 5px;">{{amount}}</view>
		</view>

		<u-sticky bgColor="#13161F">
			<u-tabs lineWidth="80" lineColor="#F6DDA4" :list="tabList" @click="tabChange"
				itemStyle="width: 50%; height: 40px;" inactiveStyle="font-size: 15px;color: #9c9c9c;font-weight: 500; "
				activeStyle="font-size: 15px;color: white;font-weight: 500;">
			</u-tabs>
		</u-sticky>

		<view class="listBox">
			<view class="listItem" v-for="item in terminalList">
				<view class="titleBox">
					{{item.terminalName}}
				</view>
				<view class="info">
					<image :src="item.imgUrl" class="cu-avatar xl " style="width: 200rpx; " mode="widthFix">
					</image>
					<view class="right">
						<view class="info-item">
							<span class="info-item-title">{{$t('home.miner.computingPower')}}</span>
							<span class="info-item-number"> {{item.power}}TH/s</span>
						</view>
						<view class="info-item">
							<span class="info-item-title">{{$t('home.miner.worked')}}</span>
							<span class="info-item-number">{{item.runNum}}{{$t('home.miner.day')}}</span>
						</view>
						<view class="info-item">
							<span class="info-item-title">{{$t('home.miner.projectedTotalIncome')}}</span>
							<span class="infoBoxNumber">{{item.totalAmount}}$</span>
						</view>
						<view class="info-item">
							<span class="info-item-title">{{$t('home.miner.currentIncome')}}</span>
							<span class="infoBoxNumber">{{item.amount}}$</span>
						</view>
						<view class="info-item">
							<span class="info-item-title"> {{$t('home.miner.purchaseTime')}}</span>
							<span class="infoBoxNumber">{{item.createTime}}</span>
						</view>
					</view>

				</view>
				<view class="bottomBox">
					<view class="price">{{item.leasePrice}}{{item.coinFlag=='1'?' LMP':'$'}}</view>
					<view class="time">{{$t('home.miner.expirationTime')}}{{item.effectiveTime}}</view>
				</view>
				<view class="action-box">
					<view class="action-box-left justify-start">
						<button class="btn sell-btn" size="mini"
							v-show="item.status == '0'">{{$t('home.miner.sell')}}</button>
						<button :loading="loading" :disabled="loading" class="btn buy-btn" size="mini"
							v-show="item.status == '0'"
							@click="startTerminal(item.userTerminalId)">{{$t('home.miner.start')}}</button>
					</view>
					<view class="action-box-right" v-show="item.status == '1'">
						<view class="action-box-right-start">
							<span class="runing"><!-- {{$t('home.miner.run')}}: --></span>
						</view>
						<view class="uni-countdown">
							<text class="uni-countdown__number">{{item.hour}}</text>
							<text class="uni-countdown__splitor">:</text>
							<text class="uni-countdown__number">{{item.minute}}</text>
							<text class="uni-countdown__splitor">:</text>
							<text class="uni-countdown__number">{{item.second}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		getBalanceInfo
	} from "@/api/system/user.js"
	import {
		userTerminalBegin,
		getUserTerminalList
	} from "@/api/terminal/terminal_info.js"
	export default {
		data() {
			return {
				amount: '100',
				tabType: '',
				terminalPage: 0,
				pageSize: 10,
				open_img: '/static/images/terminal.gif',
				tabList: [{
					name: this.$t('home.miner.unfinshed'),
					value: '1',
				}, {
					name: this.$t('home.miner.completed'),
					value: '0'
				}],
				terminalList: [],
				isBottom: false,
				loading: false
			};
		},
		onLoad: function() {
			this.getBalanceInfoFun();
			this.getUserTerminalListFun('init');
			setInterval(this.setRunTime, 1000);
		},
		onReachBottom: function() {
			//是否到底部，如果到了底部就不用查询了
			if (!this.isBottom) {
				this.getUserTerminalListFun();
			}
		},
		onNavigationBarButtonTap(e) {
			//e.index 如果是俩图标的话，index然后的0 或者1  就知道点击的哪个
			uni.navigateTo({
				url: '/pages/mine/record/terminal-reward-record'
			})
		},
		methods: {
			getBalanceInfoFun() {
				getBalanceInfo().then(rsp => {
					if (rsp.code == 200) {
						this.amount = rsp.data.amount;
					}
				});
			},
			startTerminal(userTerminalId) {
				this.loading = true;
				var $this = this;
				userTerminalBegin({
					'userTerminalId': userTerminalId
				}).then(rsp => {
					this.loading = false;
					if (rsp.code == 200) {
						uni.showToast({
							title: $this.$t('home.miner.runSuccess'),
							icon: 'success'
						})
						this.initTerminalList();
					}
				}).catch(() => {
					this.loading = false;
				})
			},
			getUserTerminalListFun(isInit) {

				getUserTerminalList({
					'type': this.tabType,
					'pageNum': ++this.terminalPage,
					'pageSize': this.pageSize,
				}).then(rsp => {
					if (rsp && rsp.code == 200) {
						this.terminalList = this.terminalList.concat(rsp.rows);
						var currentNum = this.terminalPage * this.pageSize;
						console.log("currentNum" + currentNum)
						if (currentNum >= rsp.total) {
							//全部
							if ("init" != isInit) {
								uni.showToast({
									title: "到底了",
									icon: 'none'
								})
							}
							this.isBottom = true;
						}
					}
				})
			},
			setRunTime() {
				this.terminalList.forEach(item => {
					if (item.status != '1' || !item.rewardTime) {
						return;
					}
					var X = new Date(item.rewardTime);

					// 获取当前时间的 Date 对象
					const currentDate = new Date();
					// 设置时区为哥伦比亚时区
					const options = {
						timeZone: 'America/Bogota'
					};
					// 使用 toLocaleString 方法获取格式化的本地时间
					const colombiaTime = currentDate.toLocaleString('en-US', options);

					var Y = new Date(colombiaTime);
					if (X.getTime() <= Y) {
						item.hour = '00';
						item.minute = '00';
						item.second = '00';
						return;
					}

					var T = (X.getTime() - Y.getTime());
					var M = 24 * 60 * 60 * 1000;
					var a = T / M;
					var A = Math.floor(a);
					var b = (a - A) * 24;
					var B = Math.floor(b);
					var c = (b - B) * 60;
					var C = Math.floor((b - B) * 60);
					var D = Math.floor((c - C) * 60);
					item.hour = B;
					item.minute = C;
					item.second = D;
				})
			},
			tabChange(item) {

				this.tabType = item.value;
				this.initTerminalList();
			},
			initTerminalList() {
				//清空数据
				this.terminalPage = 0;
				this.terminalList = [];
				//回到顶部
				this.isBottom = false;
				this.getUserTerminalListFun("init");
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-font;
	}

	.terminal_content {
		height: 100%;

		.balance-panel {
			box-sizing: border-box;
			height: 50px;
			border-radius: 10px;
			overflow: hidden;
			padding: 16px 20px;
			background-color: $uni-color-primary;
			color: $uni-color-box;

			.title {
				font-size: 14px;
				font-weight: 500;
			}

			.number {
				font-size: 22px;
				font-weight: 600;
			}
		}

		.listBox {
			.listItem {
				margin: 10px;
				background: $uni-color-box;
				box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
				border-radius: 10px;
				padding: 10px;
				position: relative;
				padding-bottom: 2px;

				.titleBox {


					height: 30px;
					line-height: 30px;
					padding-bottom: 10px;
					color: $uni-color-primary;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					font-size: 28rpxpx;
					font-weight: 500;
					text-align: center;
					align-content: center;
					flex-wrap: nowrap;
					flex-direction: row;
					border-bottom: 1px solid black;
					font-family: UTM Than Chien Tranh;
				}

				.info {
					display: flex;
					padding-bottom: 4px;
					border-bottom: 1px solid black;
					justify-content: center;
					align-content: center;
					flex-wrap: nowrap;
					flex-direction: row;
					align-items: center;

					.right {
						flex: 1;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.info-item {
							display: flex;
							justify-content: space-between;
							font-size: 13px;
							align-content: center;
							flex-wrap: nowrap;
							flex-direction: row;
							align-items: center;

							.info-item-title {
								height: 25px;
								line-height: 25px;
								color: #9c9c9c;
							}

							.info-item-number {
								height: 25px;
								line-height: 25px;
								font-weight: 500;
							}
						}
					}
				}

				.bottomBox {
					padding: 7px 6px 7px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-size: 16px;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: $uni-color-primary;
					}

					.time {
						display: inline-block;
						padding: 5px 14px;
						font-size: 12px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: $uni-color-subfont;
						line-height: 12px;
						border-radius: 4px;
						border: 1px solid $uni-color-subfont;
					}
				}

				.action-box {
					padding: 7px 12px 12px;
					display: flex;

					.action-box-right {
						width: 50%;
						display: flex;
						align-items: center;
						font-size: 18px;

						.action-box-right-start {
							display: flex;
							width: 100%;
							justify-content: space-around;
							align-items: center;
							margin-bottom: 3px;

							.runing {
								color: $uni-color-primary;
								font-size: 18px;
							}
						}

						.uni-countdown {
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;

							.uni-countdown__number {
								color: $uni-color-box;
								background-color: $uni-color-primary;
								font-size: 14px;
								width: 26px;
								line-height: 20px;
								border-radius: 3px;
								text-align: center;
							}

							.uni-countdown__splitor {
								color: rgb(51, 51, 51);
								font-size: 12px;
								margin: 4px;
							}
						}

					}

					.action-box-left {
						width: 60%;

						.btn {
							width: 80px;
							border-radius: 50px;
							height: 30px;
							color: $uni-color-box;
							border: 0;
							box-shadow: rgba(0, 0, 0, .15) 1.95px 1.95px 2.6px;
						}

						.sell-btn {
							margin-right: 10px;
							background-color: #f9ae3d;
							color: $uni-color-box;
						}

						.buy-btn {
							background-color: $uni-color-primary;
						}
					}
				}
			}
		}


	}
</style>